<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.list{
			width: 210px;
			/*height: 400px;*/
			border: 1px solid black;
			margin: 50px auto 0px;
			list-style: none;
			padding: 0px;
			/*overflow: hidden; 方法一 清除浮动*/
		}

		.list li{
			width: 50px;
			height: 50px;
			background-color: pink;
			margin: 10px;
			float: left;
		}


/*	
		解决margin-top塌陷的方法
		.clearfix:before{
			content: '';
			display: table;
		}

		方法三 清除浮动
		.clearfix:after{
			content: '';
			display: table;
			clear: both;
		}
*/


		/*将以上两种方法合并*/
		.clearfix:before,.clearfix:after{
			content: '';
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		/*解决部分浏览器不兼容问题*/
		.clearfix{
			zoom: 1; 
		}


	</style>
</head>
<body>
	<ul class="list clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<!-- <div style="clear: both"></div> 方法二 -->
	</ul>
</body>
</html>